<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input v-model.trim="name" type="text" />
    </div>
    <div>
      <span>年龄:</span>
      <input v-model.number="age" type="number" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender" >
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addFn" >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in arr" :key="item.id" >
          <td>{{ index+1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <button @click="delFn(index)" >删除</button>
            <button @click="editFn(index)" >编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
/**
 *  需求2：新增数据前判断用户输入内容是否合法
 *  1、给新增按钮绑定点击事件，并声明事件处理函数
 *  2、获取到用户输入的内容，声明变量然后用-v-model进行双向绑定
 *  3、在事件处理函数中获取到用户输入的内容，进行判断即可
 * 
 *  需求3：实现数据新增
 *  1、在新增数据的事件处理函数中通过push方法将数据新增即可
 *  
 *  需求4：点击编辑功能，把值赋值到输入框上
 *  1、给编辑按钮绑定点击事件，并声明事件处理函数
 *  2、在事件处理函数获取到当前行的id，然后再通过id获取到对应的数据
 *  3、在函数中把获取到的数据赋值给输入框绑定的变量
 * 
 *  需求5：用户修改后，点击“新增/编辑”按钮，实现数据编辑
 *  1、声明id，用来保存编辑数据的id（点击编辑就按钮的时候保存），用于判断用户是在编辑还是新增
 *  2、在addFn函数中通过id判断用户是编辑还是在新增
 *  3、判断条件中实现编辑功能
 *    3-1、获取id对应的下标值
 *    3-2、再通过下标值获取到当前行对象
 *    3-3、把最新值赋值给当前行的数据
 *    3-4、把id重置为null，表示编辑已经完成了
 *  4、在addFn函数的最后面清空输入框的数据
 * 
 *  需求6：删除数据
 *  1、给删除按钮绑定点击事件，并把点击按钮对应行的下标值传给事件处理函数
 *  2、在函数通过splice方法结合小标值删除数据
 *    
 */ 
export default {
    data(){
      return {
        arr: [
          {
            id: 1,
            name: "TOM",
            age: 19,
            gender: "男"
          },{
            id: 2,
            name: "Jone",
            age: 21,
            gender: "女"
          }
        ],
        name: "",
        age: null,
        gender: "男",
        id: null
      }
    },
    methods: {
      addFn(){
        // 判断用户输入内容是否为空
        if(!this.name){
          alert("名字不能为空！")
          return
        }
        if(this.age<=0){
          alert("年龄不能小于等于0")
          return
        }
        // 给id一个初始化为null,当id值为null的时候表示此刻新增数据
        // 不为null表示在编辑（点击编辑按钮的时候给id赋值了当前按钮所在行的数据id）
        if(this.id){
          // 编辑
          // 1、获取id对应的下标值
          let curIndex = this.arr.findIndex(item=>item.id===this.id);
          ///2、再通过下标值获取到当前行对象
          let obj = this.arr[curIndex];
          // 4、把最新值赋值给当前行的数据
          obj.name = this.name;
          obj.age = this.age;
          obj.gender = this.gender;
          ///4、把id重置为null，表示编辑已经完成了
          this.id = null;
        }else{
        // 新增
          let id = this.arr.length?this.arr[this.arr.length-1].id + 1:1;
          this.arr.push({
            id: id,
            name: this.name,
            age: this.age,
            gender: this.gender
          })
        }
        // 清空数据
        this.name = "";
        this.age = null;
      },
      // 编辑
      editFn(index){
        let obj = this.arr[index];
        this.name = obj.name;
        this.age = obj.age;
        this.gender = obj.gender;
        this.id = obj.id;
      },
      // 删除
      delFn(index){
        this.arr.splice(index, 1)
      }
    }
}
</script>
